<style type="text/css">
body {
	font-family: Verdana, Arial, sans serif;
	font-size: 11px;
	margin: 2px;
}

table.directions th {
	background-color: #EEEEEE;
}

img {
	color: #000000;
}
</style>
<script
	src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
	var $j = jQuery.noConflict();     
</script>
<script
	src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
	type="text/javascript"></script>
<script type="text/javascript">
 
    var map;      
    var htmlInfoWindowMarker;
    var marker;
    var blueIcon;
    var markerOptions;

	function initialize() {
		if (GBrowserIsCompatible()) {      
			map = new GMap2(document.getElementById("map_canvas"));				

			map.enableScrollWheelZoom();
            
			map.addControl(new GLargeMapControl());
			       
			map.setCenter(new GLatLng(-18,-53), 4);

			blueIcon = new GIcon(G_DEFAULT_ICON);
			blueIcon.image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png";
			blueIcon.iconSize = new GSize(32, 32);
			
			markerOptions = { icon:blueIcon,draggable: true };
			
			GEvent.addListener(map,"click", function(markerClicked, point) {  				
				if (markerClicked) { 		
					var markerPoint = markerClicked.getPoint();										  
				    var info = "<div id='popup'>";
				    info    += "<br />Point: "+markerPoint;
				    info    += "</div>";				   
				    markerClicked.openInfoWindowHtml(info);
			  	}   
				if (point) { 
					marker = new GMarker(point, markerOptions);
					map.addOverlay(marker);	
					marker.openInfoWindowHtml(formatHtmlInfoWindowMarker(point));				
				}
			});		
			loadSavedMarkers();	        				      
		}
	}

	function formatHtmlInfoWindowMarker(point){
		htmlInfoWindowMarker = 
			"<form action=''><label>Marker Info</label><br /><input type='hidden' id='markerPoint' value='"+point+"'/><textarea id='markerInfo' name='markerInfo' rows='3' cols='30'></textarea><br /><br /><input type='button' onclick='javascript:saveMarker();' value='Save'/></form>";
		return htmlInfoWindowMarker;
	}

	function saveMarker(){
		  var information = $j('#markerInfo').val();
	      var points = $j('#markerPoint').val().replace('(','').replace(')','').replace(' ','').split(',');
	      var lat = points[0];
	      var lng = points[1];		      
		  
	      var url = "index/addMarker?lat="+lat+"&lng="+lng+"&information="+information;
	      
	      GDownloadUrl(url, function(data, responseCode) {
	        if (responseCode == 200 && data.length <= 1) {	        	
	        	$j('#markerInfo').val('');
	        	$j('#markerPoint').val(''); 
	        	marker.closeInfoWindow();	
	        	alert('Marker add Sucessfull!');        	
	        }
	      });			
	}

	function loadSavedMarkers(){		
		GDownloadUrl("index/savedMarkers", function(data, responseCode) {
		  var xml = GXml.parse(data);
		  var markers = xml.documentElement.getElementsByTagName("marker"); 
		  for (var i = 0; i <markers.length; i++) {			
			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
									parseFloat(markers[i].getAttribute("lng")));

			markerOptions.title = markers[i].getAttribute("information");	
			markerOptions.draggable = false;
			map.addOverlay(new GMarker(point,markerOptions)); 								
		  }
		});
	}

    </script>

</head>

<body onload="initialize()" onunload="GUnload()">

<div id="map_canvas" style="width: 800px; height: 600px"></div>

</body>
